{% extends 'base.html' %}
{% load static %}
{% load my_tags %}
{% block css %}
    <style>
        * {
            margin:0;
            padding: 0;
        }
        .header {
            width: 100%;
            height: 60px;
            background-color: #369;
        }
        .header .title {
            font-size: 18px;
            font-weight: 100;
            line-height: 60px;
            color: white;
            margin-left: 15px;
            margin-top: -10px;
        }
        .backend {
            float:right;
            color:white;
            text-decoration: none;
            font-size:14px;
            margin-right: 10px;
            margin-top: 10px;
        }
        .article_info .title {
            margin-bottom: 20px;
        }
        #div_digg {
            float:right;
            margin-bottom:10px;
            margin-right:30px;
            font-size:12px;
            width:125px;
            text-align:center;
            margin-top:10px;
        }
        .diggit {
            float:left;
            width:46px;
            height:52px;
            background:url("{% static 'img/upup.gif' %}")no-repeat;
            text-align:center;
            cursor:pointer;
            margin-top:2px;
            padding-top:5px;
        }
        .buryit {
            float:right;
            margin-left:20px;
            width:46px;
            height: 52px;
            background: url("{% static 'img/downdown.gif' %}") no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .clear {
            clear: both;
        }

        input.author {
            background-image: url("{% static 'img/icon_form.gif' %}");
            background-repeat: no-repeat;
            border: 1px solid #ccc;
            padding: 4px 4px 4px 30px;
            width: 300px;
            font-size: 13px;
            background-position: 3px -3px;
        }

        .comment_con {
            margin-top: 10px;
        }

        .comment_item {
            margin-left: 20px;
        }
    </style>
{% endblock %}

{% block header %}
    <div class="header">
        <div class="content">
            <p class="title">
                <span>{{ blog.title }} {{ blog.site_name }}</span>
                <a href="#" class="backend">管理</a>
            </p>
        </div>
    </div>

{% endblock %}

{% block content %}

    <div class="container ">
        <div class="row">
            {# 左侧边栏 #}
            {% get_classification_style user.username %}

            <div class="col-md-9 article_info">

                <h3 class="text-center title">{{ article.title }}</h3>
                <hr>
                {# 内容应该是html标签 #}
                <div class="contents cont">{{ article.content |safe}}</div>
                {% csrf_token %}

                <div class="clearfix">
                        <div id="div_digg">
                            {# 点赞事件绑定 #}
                            <div class="diggit action">
                                <span class="diggum" id="digg_count">{{ article.up_count }}</span>
                            </div>
                            <div class="buryit action">
                                <span class="burynum" id="bruy_count">{{ article.down_count }}</span>
                            </div>
                            <div class="clear"></div>
                            <div class="diggword" id="digg_tips" style="color: red;"></div>
                        </div>
                </div>

                <div class="comments list-group">
                    <p class="tree_btn"><span class="">评论树</span></p>
                    <ul class="comment_tree list-group">

                    </ul>


                    <p>评论列表</p>
                    <ul class="list-group comment_list">
                        {% for comment in comment_list %}
                            <li class="list-group-item">
                                <div>
                                    <a href=""># {{ forloop.counter }}楼</a>&nbsp;&nbsp;
                                    <span>{{ comment.create_time|date:"Y-m-d H:i:s" }}</span>&nbsp;&nbsp;
                                    <a href=""><span>{{ comment.user.username }}</span></a>
                                    {# username comment_pk 自定义属性 #}
                                    <a class="pull-right reply_btn" username="{{ comment.user.username }}"
                                       comment_pk="{{ comment.pk }}">回复</a>
                                </div>

                                {% if comment.parent_comment_id %}
                                    <div class="pid_info well">
                                        <p>
                                            {{ comment.parent_comment.user.username }}:{{ comment.parent_comment.content }}
                                        </p>
                                    </div>
                                {% endif %}
                                <div class="comment_con">
                                    <p>{{ comment.content }}</p>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                    <p>发表评论</p>
                    {# 用ajax提交请求，不需要放到form表单中 #}
                    <p>昵称:<input type="text" id="tbCommentAuthor" class="author"
                                 disabled="disabled" size="50" value="{{ request.user.username }}">
                    </p>
                    <p>评论内容：</p>
                    <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
                    <p>
                        <button class="btn btn-default comment_btn">提交评论</button>
                    </p>
                </div>


            </div>

        </div>

    </div>


{% endblock %}

{% block js %}
    <script>

        $.ajax({
            url: "{% url 'get_comment_tree' %}",
            type: 'get',
            data: {
                "article_id": "{{ article.pk }}"
            },
            success: function (comment_list) {
                {#console.log(comment_list);#}
                {# 获取json数据数组后进行标签处理 #}
                $.each(comment_list, function (index, comment_object) {
                    var pk = comment_object.pk;
                    var content = comment_object.content;
                    var parent_comment_id = comment_object.parent_comment_id;
                    var username = comment_object.user__username;
                    var create_time = comment_object.create_time;
                    {# 评论树回复功能，没有调试好 #}
                    var s = `
                        <li class="comment_item" comment_id=${pk}>
                        <span>${create_time}</span>&nbsp;&nbsp;
                        <a href=""><span>${username}</span></a>
                        <a class="pull-right reply_btn" username=${username}
                   comment_pk=${pk}>回复</a>
                        <p>${content}</p>
                        </li>
                    `;
                    if (!parent_comment_id) {
                        {# 根评论 #}
                        $(".comment_tree").append(s);
                    } else {
                        {# [属性] 属性选择器，查找子评论 #}
                        $("[comment_id=" + parent_comment_id + "]").append(s);
                    }
                });
            }
        });

        {# 点赞脚本 #}
        {# 找到div_digg 下面的两个点赞标签 #}
        $("#div_digg .action").click(function () {
            {# 如果有diggit属性，结果为True,否则为False #}
            var is_up = $(this).hasClass('diggit');
            {#alert(is_up);#}
            {# 发送ajax请求 #}
            $obj = $(this).children("span");
            $.ajax({
                url: "{% url 'digg' %}",
                type: "post",
                data:{
                    "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(),
                    "is_up":is_up,
                    "article_id":"{{ article.pk }}",
                },
                success:function (data) {
                    console.log(data);
                    if (data.state) {
                        {# 如果 操作成功 ，使用ajax局部刷新#}
                        var val = parseInt($obj.text());
                        $obj.text(val+1);
                    }
                    else {
                        {# 如果 操作失败 #}
                        var val = data.handled?"您已经推荐过！":"您已经踩过！";
                        $("#digg_tips").html(val);
                        {# 提示信息一秒钟后消失 #}
                        setTimeout(function () {
                            $("#digg_tips").html("")

                        }, 1000)

                    }

                }
            })

        });


        {# 提交评论请求 #}
        var pid = "";
        $(".comment_btn").click(function () {
            var content = $("#comment_content").val();
            if (pid) {
                {# 如果pid存在 ，截断第一行的提示内容 #}
                var index = content.indexOf("\n");
                content = content.slice(index + 1);
            }

            $.ajax({
                url: "{% url 'comment' %}",
                type: "post",
                data: {
                    "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
                    "article_id": "{{ article.pk }}",
                    "content": content,
                    "pid": pid,

                },
                success: function (data) {
                    {#console.log(data)#}
                    {#用反引号表示下面构建的标签字符串，然后dom操作，添加到已有的ul中#}
                    var create_time = data.create_time;
                    var username = data.username;
                    var content = data.content;
                    var parent_comment = data.parent_comment;
                    var parent_comment_user = data.parent_comment_user;
                    if (pid) {
                        {# 如果pid存在 ，截断第一行的提示内容,下面使用es6语法 #}
                        var s = `
                            <li class="list-group-item">
                                <div>
                                    <span>${create_time}</span>&nbsp;&nbsp;
                                    <a href=""><span>${username}</span></a>
                                </div>
                                <div class="pid_info well">
                                        <p>
                                            ${parent_comment}:${parent_comment_user}
                                        </p>
                                </div>
                                <div class="comment_con">
                                    <p>${content}</p>
                                </div>
                            </li>
                    `;
                    } else {
                        var s = `
                            <li class="list-group-item">
                                <div>
                                    <span>${create_time}</span>&nbsp;&nbsp;
                                    <a href=""><span>${username}</span></a>
                                </div>
                                <div class="comment_con">
                                    <p>${content}</p>
                                </div>
                            </li>
                    `;
                    }


                    $("ul.comment_list").append(s);
                    {#清空评论框#}
                    $("#comment_content").val("");
                    pid = "";

                }
            })

        });

        {# 回复按钮事件 #}
        $(".reply_btn").click(function () {
            {# 获取文本输入框焦点 #}
            $("#comment_content").focus();
            var val = "@" + $(this).attr("username") + "\n";
            pid = $(this).attr("comment_pk");
            $("#comment_content").val(val);
        })

    </script>
{% endblock %}